.box{
    width: 200px;
    height: 200px;
    margin: 20px;
    background: #66ccff;
}
.show .page-loader {
    color: #fff;
    font-size: 4px;
    transform: translateZ(0);
    animation-delay: -.16s;
    border-radius: 50%;
    width: 4em;
    height: 4em;
    animation-fill-mode: both;
    animation: load7 1.8s infinite ease-in-out;
}

.show .page-loader::after {
    content: '';
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E %3Ccircle id='circle-1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' stroke-dasharray='90,35.664' cx='100' cy='100' r='80'/%3E %3Ccircle id='circle-4' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round' stroke-miterlimit='10' stroke-dasharray='50,75.664' cx='100' cy='100' r='80'/%3E %3Ccircle id='circle-3' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round' stroke-miterlimit='10' stroke-dasharray='30,95.664' cx='100' cy='100' r='80'/%3E %3Ccircle id='circle-2_1_' fill='none' stroke='%23fff' stroke-width='9' stroke-linecap='round' stroke-miterlimit='10' stroke-dasharray='10,115.664' cx='100' cy='100' r='80'/%3E %3C/svg%3E") no-repeat;
    background-size: 100%;
    animation: LOADER-ANIMATION 1s infinite cubic-bezier(.445, .05, .55, .95);
    display: block;
    width: 4rem;
    height: 4rem;
    margin-top: 1rem;
    z-index: 1;
}
@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes slide-left {
    0% {
        transform: translateX(-100%)
    }

    40% {
        transform: translateX(0)
    }

    60% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes LOADER-ANIMATION-1 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    60% {
        stroke-dasharray: 90 35.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-MAIN-1 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    50% {
        stroke-dasharray: 61 64.663706144
    }

    60% {
        stroke-dasharray: 61 64.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-4 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    60% {
        stroke-dasharray: 10 115.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-MAIN-4 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    60% {
        stroke-dasharray: 10 115.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-3 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    50% {
        stroke-dasharray: 30 95.663706144
    }

    60% {
        stroke-dasharray: 30 95.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-MAIN-3 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    60% {
        stroke-dasharray: 30 95.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-2 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    50% {
        stroke-dasharray: 50 75.663706144
    }

    60% {
        stroke-dasharray: 50 75.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION-MAIN-2 {
    0% {
        stroke-dasharray: 0 125.663706144
    }

    60% {
        stroke-dasharray: 50 75.663706144
    }

    to {
        stroke-dasharray: 0 125.663706144
    }
}

@keyframes LOADER-ANIMATION {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg) scaleX(-1) scaleY(1)
    }

    to {
        transform: translateX(-50%) translateY(-50%) rotate(1turn) scaleX(-1) scaleY(1)
    }
}

@keyframes LOADER-ANIMATION-MAIN {
    0% {
        transform: rotate(0deg) scaleX(-1) scaleY(1) translateX(-50%) translateY(-50%)
    }

    to {
        transform: rotate(180deg) scaleX(-1) scaleY(1) translateX(-50%) translateY(-50%)
    }
}

@keyframes LOADER-ANIMATION-10 {
    0% {
        width: 0
    }

    to {
        width: 185px
    }
}
